<template>
  <v-dialog v-model="registerFlag" :fullscreen="isMobile" max-width="460">
    <v-card class="login-container" style="border-radius:4px">
      <v-icon class="float-right" @click="registerFlag = false">
        mdi-close
      </v-icon>
      <div class="login-wrapper">
        <!-- 用户名 -->
        <v-text-field
                v-model="form.username"
                label="邮箱号"
                placeholder="请输入您的邮箱号"
                clearable
                @keyup.enter="register" @blur="check"
        />
<!--        <div v-show="showCapt" class="captcha">-->
<!--          <a-card>-->
<!--            <div >-->
<!--              &lt;!&ndash;    l:滑块的边长-->
<!--                      r:滑块突出圆的半径-->
<!--                      w:canvas画布的宽-->
<!--                      h:canvas画布的高-->
<!--                      imgs:背景图数组-->
<!--                      sliderText:滑块底纹文字-->
<!--                      accuracy:滑动验证的误差范围,默认值为5-->
<!--                      show：是否显示刷新按钮-->

<!--                      success：验证码匹配成功的回调-->
<!--                      fail：验证码未匹配的回调-->
<!--                      refresh：点击刷新按钮后的回调函数-->
<!--                      fulfilled：刷新成功之后的回调函数-->
<!--               &ndash;&gt;-->
<!--              <slide-verify-->
<!--                :l="42"-->
<!--                :r="10"-->
<!--                :w="310"-->
<!--                :h="200"-->
<!--                :imgs="bgimgs"-->
<!--                @success="onSuccess"-->
<!--                @fail="onFail"-->
<!--                @refresh="onRefresh"-->
<!--                ref="slideblock"-->
<!--                :slider-text="text"-->
<!--              ></slide-verify>-->
<!--            </div>-->
<!--            <div class="yz-msg">{{ msg }}</div>-->
<!--          </a-card>-->
<!--        </div>-->

        <div class="mt-7 send-wrapper">
          <v-text-field
                  maxlength="6"
                  v-model="form.code"
                  label="验证码"
                  placeholder="请输入6位验证码"
                  @keyup.enter="register"
          />
          <el-popover
            placement="left"
            width="350"
            trigger="click"
            v-model="visible">
              <a-card>
                <div>
                  <!--    l:滑块的边长
                          r:滑块突出圆的半径
                          w:canvas画布的宽
                          h:canvas画布的高
                          imgs:背景图数组
                          sliderText:滑块底纹文字
                          accuracy:滑动验证的误差范围,默认值为5
                          show：是否显示刷新按钮

                          success：验证码匹配成功的回调
                          fail：验证码未匹配的回调
                          refresh：点击刷新按钮后的回调函数
                          fulfilled：刷新成功之后的回调函数
                   -->
                  <slide-verify
                    :l="42"
                    :r="10"
                    :w="310"
                    :h="200"
                    :imgs="bgimgs"
                    @success="onSuccess"
                    @fail="onFail"
                    @refresh="onRefresh"
                    ref="slideblock"
                    :slider-text="text"
                  ></slide-verify>
                </div>
                <div class="yz-msg"><font color="red">{{ msg }}</font></div>
              </a-card>
            <el-button slot="reference" text small :disabled="flag" @click="captcha"> {{ codeMsg }}</el-button>
          </el-popover>
<!--          <v-btn text small :disabled="flag" @click="captcha">-->
<!--            {{ codeMsg }}-->
<!--          </v-btn>-->
        </div>
        <!-- 密码 -->
        <v-text-field
                v-model="form.password"
                class="mt-7"
                label="密码"
                placeholder="请输入您的密码"
                @keyup.enter="register"
                :append-icon="show ? 'mdi-eye' : 'mdi-eye-off'"
                :type="show ? 'text' : 'password'"
                @click:append="show = !show"
        />
        <!-- &lt;!&ndash; 确认密码 &ndash;&gt;
         <v-text-field
           v-model="form.confirm"
           class="mt-7"
           label="确认密码"
           placeholder="请再次输入您的密码"
           @keyup.enter="register"
           :append-icon="show ? 'mdi-eye' : 'mdi-eye-off'"
           :type="show ? 'text' : 'password'"
           @click:append="show = !show"
         />-->
        <!-- 注册按钮 -->
        <v-btn
                class="mt-7"
                block
                color="red"
                style="color:#fff"
                @click="register"
        >
          注册
        </v-btn>
        <!-- 登录 -->
        <div class="mt-10 login-tip">
          已有账号？<span @click="openLogin">登录</span>
        </div>
      </div>
    </v-card>
  </v-dialog>
</template>

<script>
    import request from '../../utils/request'
    export default {
      components:{
      },
        data: function() {
            return {
                form:{
                    username: "",
                    password: "",
                    confirm:'',
                    code:''
                },
                visible:false,
                timer:null,
                flag: true,
                codeMsg: "发送",
                second: 60,
                show: false,
                showCapt: false,
                isSend:false,
                msg: "",
                // bgimgs: imgList,
                bgimgs:[],	//	如果使用网络图片资源就用该值
                text: "向右滑动~",
                state: false,
                // 精确度小，可允许的误差范围小；为1时，则表示滑块要与凹槽完全重叠，才能验证成功。默认值为5
                accuracy: 1,
            };
        },

        methods: {
          onSuccess(times){
            console.log(`验证通过，耗时 + ${times} + 毫秒`);
            this.msg = `login success, 耗时${(times / 1000).toFixed(1)}s`;
            this.visible = false;
            this.msg = ''
            this.sendCode();
          },
          onFail(){
            console.log('验证不通过');
            this.msg = '登录失败'
          },
          onRefresh(){
            console.log('点击了刷新小图标');
            this.msg = ''
          },
          captcha(){
            this.showCapt = true;
          },
            //定时器
            countDown() {

                this.flag = true
                this.timer = setInterval(() => {
                    if (this.second > 0) {
                        this.second--
                        this.codeMsg = this.second
                    } else {
                        clearInterval(this.timer)
                        this.timer = null
                        this.flag = false
                        this.codeMsg = '发送'
                        this.second = 60
                    }
                }, 1000)
            },
            check(){
                var reg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;

                if (this.form.username===''){
                    this.flag=true
                }
                if (!reg.test(this.form.username)) {
                    this.$toast({ type: "error", message: "邮箱格式不正确" });
                    this.flag=true
                    return false;
                }else{
                    this.flag=false
                }
            },
            openLogin() {
                this.$store.state.registerFlag = false;
                this.$store.state.loginFlag = true;
            },
            sendCode() {
                request.post("/user/sendEmail/"+this.form.username,this.form.code).then(res=>{
                    console.log(res.code)
                  if (res.code === 20000){
                    this.$toast({
                      type:'success',
                      message:res.msg
                    })
                  }else{
                    this.$toast({
                      type:'error',
                      message: res.msg
                    })
                  }

                })
                // 显示验证码
                this.countDown();
            },

            register() {
                var reg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;

                if (!reg.test(this.form.username)) {
                    this.$toast({ type: "error", message: "邮箱格式不正确" });
                    return false;
                }
                if (this.form.password.trim().length < 6) {
                    this.$toast({ type: "error", message: "密码不能少于6位" });
                    return false;
                }
                /* if (this.form.confirm.trim().length < 6) {
                   this.$toast({ type: "error", message: "密码不能少于6位" });
                   return false;
                 }*/
                /* if (this.form.password != this.form.confirm) {
                     this.$toast({
                         type: "error",
                         message: "两次输入的密码不一致"
                     })
                     return
                 }*/


                request.post("/user/register",this.form).then(res=>{
                    if (res.code===1){
                        this.$toast({type:"success",message:res.msg})
                        this.$store.state.registerFlag = false;
                        this.$store.state.loginFlag = true;
                    }else {
                      this.$toast({type:"error",message:res.msg})
                    }

                })

                /*const user = {
                  username: this.username,
                  password: this.password,
                  code: this.code
                };
                this.axios.post("/api/users", user).then(({ data }) => {
                  if (data.flag) {
                    let param = new URLSearchParams();
                    param.append("username", user.username);
                    param.append("password", user.password);
                    this.axios.post("/api/login", param).then(({ data }) => {
                      this.username = "";
                      this.password = "";
                      this.$store.commit("login", data.data);
                      this.$store.commit("closeModel");
                    });
                    this.$toast({ type: "success", message: data.message });
                  } else {
                    this.$toast({ type: "error", message: data.message });
                  }
                });*/
            }
        },
        computed: {
            registerFlag: {
                set(value) {
                    this.$store.state.registerFlag = value;
                },
                get() {
                    return this.$store.state.registerFlag;
                }
            },
            isMobile() {
                const clientWidth = document.documentElement.clientWidth;
                if (clientWidth > 960) {
                    return false;
                }
                return true;
            }
        },
        watch: {
            username(value) {
                var reg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
                if (reg.test(value)) {
                    this.flag = false;
                } else {
                    this.flag = true;
                }
            }
        }
    };
</script>
<style scoped>
.captcha {
  position: absolute;
  top: 10px;
  left: 10px;

}
</style>
